'use client'
// rnf -> RN下创建函数组件
// rfc -> 浏览器端创建函数组件 
import React from 'react'
import styles from './page.module.css'
import Link from 'next/link'
import { Button, Card, Checkbox, Divider, Form, Image, Input, Modal, Typography, message } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons'
import { adminLogin } from '@/service'
import { useRouter } from 'next/navigation'

export default function page() {
  // 创建路由对象
  const router = useRouter()

  // 监听按钮提交
  const doLogin = async (values) => {
    // values 提交表单，获取的值
    console.log(values)
    // 请求登录接口
    const data = await adminLogin(values)
    console.log(data)
    if(data.code === 2000) { // 登录成功 —— Message
      message.success('登录成功',3)
      // 存储token
      localStorage.setItem('userToken',data.token)
      // 判断是否记住密码
      if(values.remember) {
        // 将用户名和密码保存到storage
        localStorage.setItem('aname',values.aname)
        localStorage.setItem('apwd',values.apwd)
      } else {
        localStorage.removeItem('aname')
        localStorage.removeItem('apwd')
      }
      // 跳转
      router.replace('/admin')
    } else {  // 登录失败 —— Modal
      Modal.error({
        title: '错误',
        content: '登录失败！错误信息：'+ data.msg,
        //cancelText: '退下', // 取消 只能给confirm
        okText: '朕知道了'  // 确认
      })
    }
    
  }
  return (
    <div className={styles.page}>
      {/* 标题字 */}
      <Typography.Title
        level={2}
        style={{
          color: '#FFF',
          textAlign: 'center',
          paddingTop: 150
        }}
      >天通苑智慧社区后台管理系统</Typography.Title>
      {/* 卡片组件 */}
      <Card style={{
        width: 600,
        margin: '0 auto'
      }}>
        <div style={{display: 'flex'}}>
          {/* 左侧：图片 */}
          {/* preview={false} 关闭预览 */}
          <Image width={200} src='/img/ring.jpg' preview={false} />
          {/* 中间：分割线 */}
          <Divider type='vertical' style={{height: 220}} />
          {/* 右侧：表单 */}
          {/* labelCol  左侧标签文字占的列数 
            wrapperCol  右侧包裹的输入区域占的列数
          */}
          <Form
            // 监听提交成功
            onFinish={doLogin}
            style={{flex: 1, paddingLeft: 15, paddingTop: 15}}
            // labelCol={{
            //   span: 6
            // }}
            wrapperCol={{
              span: 24
            }}
          >
            {/* 表单项 */}
            <Form.Item
              name='aname'
              // 表单验证，required不能为空，message提示消息
              rules={[
                { required: true,message: '用户名不能为空' }
              ]}
              // 设置初始值
              initialValue={localStorage.getItem('aname')}
            >
              <Input placeholder='请输入管理员用户名' prefix={<UserOutlined />} />
            </Form.Item>
            <Form.Item
              name='apwd'
              rules={[
                {required: true, message: '密码不能为空'}
              ]}
              initialValue={localStorage.getItem('apwd')}
            >
              <Input.Password placeholder='请输入密码' prefix={<LockOutlined />} />
            </Form.Item>
            {/* offset 偏移量，左侧留出的空间 */}
            <Form.Item 
              wrapperCol={{offset: 17}} 
              name='remember'
              valuePropName='checked'
            >
              {/* valuePropName 选择Checkbox的哪一个属性作为提交的值 */}
              <Checkbox onChange={(e) => console.log(e.target.checked)}>记住密码</Checkbox>
            </Form.Item>
            <Form.Item>
              {/* htmlType 设置为提交按钮，否则没有提交功能
                block 设置为100%
              */}
              <Button type='primary' block htmlType='submit'>登录</Button>
            </Form.Item>
          </Form>
        </div>
        
      </Card>
    </div>
  )
}
